<!--
	This file is part of ELCube.
	ELCube is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.
	ELCube is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.
	You should have received a copy of the GNU Affero General Public License
	along with ELCube.  If not, see <https://www.gnu.org/licenses/>.
-->
<template>
    <nk-card>

        <a-button-group size="small" slot="extra"  v-if="dmnVisible">
            <a-button @click="$refs.bpmn.zoom( 1)"><a-icon type="zoom-in" /></a-button>
            <a-button @click="$refs.bpmn.zoom(-1)"><a-icon type="zoom-out" /></a-button>
            <a-button size="small" @click="dmnVisible=false"><a-icon type="close-circle" /></a-button>
        </a-button-group>
        <a-button v-else slot="extra" type="link" @click="openDefinition">查看决策图</a-button>
        <a-spin :spinning="loading" style="width:100%">
            <nk-bpmn-view ref="bpmn" :bpmn="definition.xml" v-if="definition && dmnVisible" @init="viewInit"></nk-bpmn-view>
        </a-spin>

        <nk-form v-if="data.fields" :col="1">
            <nk-form-item v-for="item in data.fields" :key="item.field" :title="item.title">
                {{data.result[item.field] | join}}
            </nk-form-item>
        </nk-form>
    </nk-card>
</template>

<script>
    import Mixin from "Mixin";

    export default {
        mixins:[new Mixin()],
        filters:{
            join(value){
                if(value instanceof Array){
                    return value.join(',')
                }
                return value;
            }
        },
        data(){
            return {
                definition:undefined,
                loading:false,
                dmnVisible:false
            }
        },
        created(){
        },
        methods:{
            docUpdate(){
                this.dmnVisible = false;
            },
            openDefinition(){
                this.dmnVisible = true;
                this.loading=true;
                this.nk$call('dmn').then(res=>{
                    this.definition = res;
                    this.loading=false;
                });
            },
            viewInit(){
                let rules = {};
                rules[this.def.key]=this.data.matchedRules;

                this.$refs.bpmn.fired(rules);
                this.$refs.bpmn.changeView(this.def.key);
            }
        }
    }
</script>

<style scoped lang="less">
    ::v-deep{
        .dmn-drd-container{
            .dmn-definitions{
                opacity: 0.9;
                top: 0;
                left: 0;
                display: none;

                .dmn-definitions-name{
                    font-size: 14px;
                }
                .dmn-definitions-id{
                    display: none;
                }
            }
        }

        .dmn-literal-expression-container{
            .view-drd-button{
                font-size: 12px;
                padding: 5px;
                font-weight: normal;
            }
            .decision-name{
                font-size: 14px;
                font-weight: bold;
            }
            .textarea{
                height: auto;
                min-height: 200px;
            }
            .literal-expression-properties{
                font-size: 12px;
                padding: 6px;
            }
        }

        .dmn-decision-table-container{
            .tjs-table-container{
                border-top-width: 0;
                border-bottom-width: 0;
            }
            .view-drd-button{
                font-size: 12px;
                padding: 5px;
                font-weight: normal;
            }
            thead th{
                min-width: 100px;
                width: 140px;
            }
            td{
                font-size: 12px;
            }
            th.index-column{
                width: 40px;
            }
            th.annotation{
                width: 140px !important;
            }
            .decision-table-name{
                font-size: 14px;
            }
            .decision-table-header-separator{
                border-left-width: 1px;
            }
            .hit-policy.header{
                font-size: 12px;
            }
            .tjs-table{
                .input-label,.output-label{
                    margin: 0;
                    font-size: 12px;
                }
            }
        }
    }
</style>